import { PropType, computed, defineComponent } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import './mdctrl-container.scss';

export const MDCtrlContainer = defineComponent({
  name: 'IBizMDCtrlContainer',
  props: {
    enableCreate: {
      type: Boolean,
      required: true,
    },
    enableDelete: {
      type: Boolean,
      required: true,
    },
    items: {
      type: Object as PropType<IData[]>,
      required: true,
    },
  },
  emits: {
    addClick: () => true,
    removeClick: (_data: IData, _index: number) => true,
  },
  setup(props, { emit }) {
    const ns = useNamespace('mdctrl-container');

    /** 是否显示操作按钮 */
    const showActions = computed(() => {
      return props.enableCreate || props.enableDelete;
    });

    const renderAddBtn = () => {
      return (
        <el-button
          class={[
            ns.be('item-actions', 'create'),
            ns.be('item-actions', 'btn'),
          ]}
          onClick={(): void => emit('addClick')}
        >
          {ibiz.i18n.t('app.add')}
        </el-button>
      );
    };

    const renderRemoveBtn = (item: IData, index: number) => {
      if (!props.enableDelete) {
        return null;
      }
      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
        return (
          <el-popconfirm
            title={ibiz.i18n.t(
              'control.form.mdCtrlContainer.promptInformation',
            )}
            confirm-button-text={ibiz.i18n.t('app.confirm')}
            cancel-button-text={ibiz.i18n.t('app.cancel')}
            onConfirm={() => emit('removeClick', item, index)}
          >
            {{
              reference: () => {
                return (
                  <el-button
                    type='danger'
                    class={[
                      ns.be('item-actions', 'remove'),
                      ns.be('item-actions', 'btn'),
                    ]}
                  >
                    {ibiz.i18n.t('app.delete')}
                  </el-button>
                );
              },
            }}
          </el-popconfirm>
        );
      }
      return (
        <el-button
          type='danger'
          class={[
            ns.be('item-actions', 'remove'),
            ns.be('item-actions', 'btn'),
          ]}
          onClick={() => emit('removeClick', item, index)}
        >
          {ibiz.i18n.t('app.delete')}
        </el-button>
      );
    };

    return { ns, showActions, renderAddBtn, renderRemoveBtn };
  },
  render() {
    return (
      <div class={this.ns.b()}>
        {this.items?.length ? (
          this.items.map((item, index) => {
            const formComponent = this.$slots.item ? (
              this.$slots.item({ data: item, index })
            ) : (
              <div>{ibiz.i18n.t('control.form.mdCtrlContainer.noSlot')}</div>
            );

            return (
              <div class={this.ns.b('item')}>
                {formComponent}
                {this.showActions && (
                  <div class={this.ns.b('item-actions')}>
                    {index === 0 && this.enableCreate && this.renderAddBtn()}
                    {this.renderRemoveBtn(item, index)}
                  </div>
                )}
              </div>
            );
          })
        ) : (
          <div class={this.ns.b('no-data')}>
            {this.enableCreate && (
              <div class={this.ns.b('item-actions')}>{this.renderAddBtn()}</div>
            )}
          </div>
        )}
      </div>
    );
  },
});
